<template>
  <div>
    <a href="#/login">登录</a>&nbsp;
    <a href="#/info">信息</a>
    <hr>
    <button @click="fn">按钮</button>
    <hr>
    <router-link to="/myuser?id=1">用户一</router-link>&nbsp;
    <router-link to="/myuser?id=2">用户二</router-link>&nbsp;
    <hr>
        <button @click="fn2">用户三</button>
        <button @click="fn3">用户4</button>
    <hr>
        <button @click="fn4">文章一</button>
        <button @click="fn5">文章二</button>
    <hr>
        <router-link to="/article/4">文章3</router-link>&nbsp;
        <router-link to="/article/5">文章4</router-link>&nbsp;
    <hr>
    <button @click="fn10">返回</button>
    <hr>
    <!-- 申明式导航 -->
    <router-link to="/login">登录</router-link>&nbsp;
    <router-link to="/login/abc">登录</router-link>&nbsp;
    <router-link to="/info">信息</router-link>
    <router-link to="/zhejiang/hangzhou">杭州</router-link>&nbsp;
    <router-link to="/zhejiang/wenzhou">温州</router-link>&nbsp;
     <router-view></router-view>


   </div>
</template>
 
<script>
export default {
  name: "App",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn(){
      // 编程式导航
      this.$router.push('/login')
    },
    fn2(){
      this.$router.push('/myuser?id=3')
    },
    fn3(){
      this.$router.push({
        path:'/myuser',
        query:{
        id:4
      }})
    },
    fn4(){
      this.$router.push('/article/4')
    },
     fn5(){
      this.$router.push({
        name:"article",
        params:{id:7}
      })
    },
    fn10(){
      this.$router.go(-1)
      // this.$router.back()
    }
  }
};
</script>

<style scoped>
     .router-link-active{
      color:lightblue;
      background-color:#eee
     }
     .router-link-exact-active{
      color:orange;
     }
     
</style>